<template>
  <div class="list">
    <!-- 列表头部 -->
    <div class="listTitle">
      <span
        @click="dian(index)"
        v-for="(item, index) in listTitle"
        :key="index"
        >{{ item }}</span
      >
    </div>
    <!-- 店铺信息 -->
    <!-- 点击正在抢购时显示 -->
    <div v-if="cIndex == 0" class="box">
      <div class="dian" v-for="(item, index) in list" :key="index">
        <div class="imgbox">
          <img :src="item.pic" alt="" />
        </div>
        <!-- 店铺详情 -->
        <div class="neirong">
          <!-- 地址 -->
          <div class="dizhi">
            <span>{{ item.name }}</span>
            <span>|</span>
            <span>{{ item.url }}</span>
          </div>
          <!-- 标题 -->
          <div class="title">
            <span>{{ item.title }}</span>
          </div>
          <!-- 马上抢 -->
          <div class="qing">
            <!-- 左边 -->
            <div class="price">
              <!-- 上边 -->
              <div class="tuan">
                <span>爆爆团价</span>
              </div>
              <!-- 下边 -->
              <div class="yaun">
                <span>￥{{ item.price }}</span>
                <span>{{ item.zhe }}折</span>
              </div>
            </div>
            <!-- 右边 -->
            <div class="btn">
              <span @click="lingqu(item, index)">{{
                item.qing ? "已抢" : "马上抢"
              }}</span>
            </div>
          </div>
          <!-- 已售 -->
          <div class="shou">
            <span>￥{{ item.yuan }}</span>
            <span>已售{{ item.shou }}份</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 上新预告中显示 -->
    <div v-else class="box">
      <div class="dian" v-for="(item, index) in list2" :key="index">
        <div class="imgbox">
          <img :src="item.pic1" alt="" />
        </div>
        <!-- 店铺详情 -->
        <div class="neirong">
          <!-- 地址 -->
          <div class="dizhi">
            <span>{{ item.name }}</span>
            <span>|</span>
            <span>{{ item.url }}</span>
          </div>
          <!-- 标题 -->
          <div class="title">
            <span>{{ item.title }}</span>
          </div>
          <!-- 马上抢 -->
          <div class="qing">
            <!-- 左边 -->
            <div class="price">
              <!-- 上边 -->
              <div class="tuan">
                <span>爆爆团价</span>
              </div>
              <!-- 下边 -->
              <div class="yaun">
                <span>￥{{ item.price }}</span>
                <span>{{ item.zhe }}折</span>
              </div>
            </div>
            <!-- 右边 -->
            <div class="btn">
              <span>马上抢</span>
            </div>
          </div>
          <!-- 已售 -->
          <div class="shou">
            <span>￥{{ item.yuan }}</span>
            <span>已售{{ item.shou }}份</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var pic =
  "https://img1.baidu.com/it/u=3870557935,2333078440&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";

var pic1 =
  "https://img2.baidu.com/it/u=3094149767,177600321&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665766800&t=36711f307aa7533a98fc78a881a35fd2";
export default {
  data() {
    return {
      cIndex: "",
      listTitle: ["正在抢购", "上新预告"],
      list: [
        {
          pic,
          name: "汉堡王",
          url: "北类新天地餐厅",
          title: "买1送1明星皇堡|用心火烤 肉质紧实 鲜嫩多汁 爆爆团",
          price: 25,
          zhe: 5,
          yuan: 50,
          shou: 9029,
          qing: false,
        },
        {
          pic,
          name: "华莱士·金鸡汉堡",
          url: "长治路店",
          title: "华莱士|聚划算单人套餐 | 进店必选",
          price: 12.12,
          zhe: 3.9,
          yuan: 31.2,
          shou: 173,
          qing: false,
        },
        {
          pic,
          name: "贡天下山西特产",
          url: "高新店",
          title: "白老大小米果仁酥220g【爆爆团】",
          price: 30.12,
          zhe: 4.2,
          yuan: 50.8,
          shou: 1373,
          qing: false,
        },
      ],
      list2: [
        {
          pic1,
          name: "金百万烤鸭",
          url: "苏家坨店",
          title: "金百万烤鸭|用心火烤 肉质紧实 鲜嫩多汁 爆爆团",
          price: 20,
          zhe: 3,
          yuan: 6,
          shou: 1632,
          qing: false,
        },
        {
          pic1,
          name: "华莱士·金鸡汉堡",
          url: "长治路店",
          title: "稻香金源饺子馆|聚划算单人套餐 | 进店必选",
          price: 12.12,
          zhe: 3.9,
          yuan: 31.2,
          shou: 173,
          qing: false,
        },
        {
          pic1,
          name: "贡天下山西特产",
          url: "高新店",
          title: "白老大小米果仁酥220g【爆爆团】",
          price: 30.12,
          zhe: 4.2,
          yuan: 50.8,
          shou: 1373,
          qing: false,
        },
      ],
    };
  },
  methods: {
    // 点击更换渲染列表
    dian(index) {
      this.cIndex = index;
    },
    // 点击事件点击红包内容改变
    lingqu(item, index) {
      // 修改当前点击红包对象的qing属性的值，改为true
      item.qing = true;
      //   console.log(this.list);
    },
  },
};
</script>

<style lang='scss' scoped >
// 正在抢购
.list {
  box-sizing: border-box;
  padding: 0 15px;
}

.list .listTitle {
  display: flex;
  box-sizing: border-box;
  padding-bottom: 15px;
  background-color: orangered;
  padding-top: 15px;
}

.list .listTitle span {
  display: inline-block;
  color: white;
  margin-right: 15px;
}

// 店铺
.list .dian {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  padding: 10px;
  border-radius: 10px;
  background-color: white;
  margin-bottom: 4px;
}

// 右边图片
.list .dian .imgbox {
  height: 100px;
  margin-right: 10px;
}

.list .dian .imgbox img {
  height: 100%;
}

// 左边店铺信息

// 店铺名和地址
.list .dian .neirong .dizhi {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

// 店铺标题信息
.list .dian .neirong .title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: black;
}

// 马上抢
.list .dian .neirong .qing {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.list .dian .neirong .price .tuan {
  font-size: 10px;
  color: red;
  margin-bottom: 5px;
}

.list .dian .neirong .price .yaun {
  color: red;
  font-size: 14px;
}

.list .dian .neirong .price .yaun span:nth-child(2) {
  font-size: 10px;
  display: inline-block;
  border: 1px solid red;
  margin-left: 5px;
}

.list .dian .neirong .btn {
  margin-top: 10px;
  width: 62px;
  text-align: center;
  height: 24px;
  line-height: 24px;
  color: white;
  background-color: red;
  border-radius: 10px;
}

// 已售

.list .dian .neirong .shou {
  display: flex;
  justify-content: space-between;
}

.list .dian .neirong .shou span:nth-child(1) {
  color: #999;
  text-decoration: line-through;
  font-size: 10px;
}

.list .dian .neirong .shou span:nth-child(2) {
  color: red;
  font-size: 10px;
}
</style>